<style>
.ingredients-banner-main{
    width:100%;
    font-size:0;
}
.ingredients-banner-wrapper{
    width:100%;
}
.ingredients-banner-main picture img{
    max-width:100%;
    margin:0 auto;
}
</style>

<div class="ingredients-banner-main">
    <div class="ingredients-banner-wrapper">
      {% if section.settings.image_pc %}
        <picture>
          <source srcset="{{ section.settings.image_mb | img_url: 'master' }}" media="(max-width: 750px)" />
          <img src="{{ section.settings.image_pc | img_url: 'master' }}" alt="{{ section.settings.image_pc.alt | escape }}" />
        </picture>
      {% endif %}
    </div>
</div>

{% schema %}
{
  "name": "page页 - CMS Banner",  
  "class":"page-ingredients-banner",
  "settings": [
    {
      "type": "image_picker",
      "id": "image_pc",
      "label": "PC Banner"
    },
    {
      "type": "image_picker",
      "id": "image_mb",
      "label": "MB Banner"
    }
  ]
}
{% endschema %}
